<template>
  <div class="scheme-layout">
    <p class="title webfont-Medium">
      {{
        clientwidth < 1080
          ? "专业投放平台"
          : "专业投放平台，为您量身打造ASA解决方案"
      }}
    </p>

    <div class="scheme-main">
      <div :class="'main-header flex ' + 'active-' + (activeIndex + 1)">
        <span
          v-for="(item, index) in schemeOP"
          :key="index"
          :class="
            activeIndex === index
              ? 'active webfont-Medium pointer'
              : 'webfont-Medium pointer'
          "
          @click="changeIndex(index)"
          >{{ item.title }}</span
        >
      </div>

      <div class="main-list">
        <img
          class="bg-img"
          :src="require('@/assets/images/homepage/scheme-bg.svg')"
        />
        <div
          v-for="(item, index) in schemeOP"
          v-show="activeIndex === index"
          :key="item.class"
          :class="'scheme-item flex ' + item.class"
        >
          <div class="lt">
            <img v-for="(v, i) in item.imgs" :key="i" :src="v" />
          </div>
          <div class="rt">
            <p class="title webfont-Medium">{{ item.title }}</p>
            <p class="sub-title">
              <span>{{ item.subTitle }}</span>
            </p>
            <div class="item-info">
              <p v-for="(v, i) in item.info" :key="i" class="flex">
                <img :src="v.img" />
                <span>{{ v.txt }}</span>
              </p>
            </div>

          <!--  <div class="item-btn pointer" @click="open3ydta">
              <span>
                联系客服
                <i class="iconfont icon-a-Vector4"></i>
              </span>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "", // ·������
  data() {
    return {
      activeIndex: 1,

      schemeOP: [
        {
          class: "yuan",
          title: "多元投放模式",
          subTitle: "三大模式自由选择，满足您多元投放需求，省时、省心又省力",
          imgs: [
            require("@/assets/images/homepage/yuan-1.png"),
            require("@/assets/images/homepage/yuan-2.png"),
            require("@/assets/images/homepage/yuan-3.png"),
          ],
          info: [
            {
              img: require("@/assets/images/homepage/yuan-rt-1.png"),
              txt: "自助投放：高度集成的投放平台，支持ASA全流程创建、投放、监测。",
            },
            {
              img: require("@/assets/images/homepage/yuan-rt-2.png"),
              txt: "协同投放：结合独有的投放工具,亲自操刀自家产品投放。",
            },
            {
              img: require("@/assets/images/homepage/serve-2.png"),
              txt: "智能投放：设置产品和目标，由AI自动投放，并且持续动态调价。",
            },
          ],
        },
        {
          class: "wei",
          title: "多维数据分析",
          subTitle:
            "随时查看您每一个关键词ARPU、留存、ROI等多维度精细颗粒度数据，轻松、高效调整您的广告投放。",
          imgs: [
            require("@/assets/images/homepage/wei-1.png"),
            require("@/assets/images/homepage/wei-2.png"),
            require("@/assets/images/homepage/wei-3.png"),
          ],
          info: [
            {
              img: require("@/assets/images/homepage/wei-rt-1.png"),
              txt: "实时展示：实时监测展示百万级竞价应用、千万级关键词数据。",
            },
            {
              img: require("@/assets/images/homepage/wei-rt-2.png"),
              txt: "全面监测：从广告系列到关键词、广告展示到下载多维度、全路径数据。",
            },
            {
              img: require("@/assets/images/homepage/wei-rt-3.png"),
              txt: "定制报告：根据不同需求自定义数据报告，定时发送。",
            },
          ],
        },
        {
          class: "yang",
          title: "多样投放工具",
          subTitle:
            "内置多样效率工具，助您更好地优化广告投放、分析、调整各个环节。",
          imgs: [
            require("@/assets/images/homepage/yang-1.png"),
            require("@/assets/images/homepage/yang-2.png"),
            require("@/assets/images/homepage/yang-3.png"),
          ],

          info: [
            {
              img: require("@/assets/images/homepage/yang-rt-1.png"),
              txt: "自动拓词工具：依托千万级关键词库，一键拓展最有价值关键词。",
            },
            {
              img: require("@/assets/images/homepage/yang-rt-2.png"),
              txt: "批量管理工具：可批量添加多国家地区的关键词，批量调整出价。",
            },
            {
              img: require("@/assets/images/homepage/yang-rt-3.png"),
              txt: "竞品监测工具：实时监测竞品动态，掌握其竞价趋势与选词策略。",
            },
          ],
        },
      ],
    };
  },
  computed: {
    clientwidth() {
      return window.innerWidth;
    },
  },
  watch: {
    // obj: { //�����Ķ���
    //   deep: true, //���ȼ�������Ϊ true
    //   // ������wacth��������firstName��������֮��������ȥִ��handler����
    //       immediate: true
    //   handler: function(newV, oldV) {
    //     console.log('watch�У�', newV)
    //   }
    // }
  },
  // ������
  created() {},
  // ���غ�
  mounted() {},
  // ���ٺ�
  destroyed() {},

  // ����
  methods: {
    open3ydta() {
      // window.open("https://login.3ydata.com/");
      window.open('https://work.weixin.qq.com/kfid/kfc8f988e91e6278c87', 'newwindow', 'height=600, width=600, top=200,  left=200, toolbar=no, menubar=no, scrollbars=no, resizable=yes,location=no, status=no')

    },
    changeIndex(index) {
      this.activeIndex = index;
    },
    handleInto() {
      this.$emit("handleInto");
    },
  },
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";

.scheme-layout {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 140px;

  p {
    text-align: center;
  }

  .title {
    font-size: 32px;
    line-height: 32px;
    margin-bottom: 60px;
  }

  .sub-title {
    font-size: 14px;
    line-height: 28px;
    color: rgba(51, 64, 74, 0.8);
    margin-bottom: 66px;
  }

  .scheme-main {
    .main-header {
      border-bottom: 1px solid rgba(51, 64, 74, 0.1);
      padding: 18px 155px;
      padding-top: 0;
      position: relative;

      &::after {
        position: absolute;
        bottom: 0;
        left: 125px;
        width: 160px;
        height: 4px;
        content: "2";
        font-size: 0;
        background-color: $mainColor1;
        transition: left 0.23s linear;
      }

      &.active-1 {
        &::after {
          left: 125px;
        }
      }

      &.active-2 {
        &::after {
          left: 520px;
        }
      }

      &.active-3 {
        &::after {
          left: 900px;
        }
      }

      span {
        text-align: center;
        font-size: 16px;
        line-height: 16px;
        color: rgba(51, 64, 74, 0.8);

        &.active {
          color: $mainColor1;
          position: relative;
        }
      }
    }

    .main-list {
      position: relative;
      z-index: 1;
      padding-top: 72px;

      .bg-img {
        position: absolute;
        z-index: 0;
        width: 394px;
        height: 367px;
        top: 62px;
        left: 46px;
      }

      .scheme-item {
        align-items: center;

        .lt,
        .rt {
          position: relative;
          z-index: 3;
        }

        .lt {
          align-self: flex-start;
          height: 328px;

          img {
            filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.1));
            transition: all 0.5s ease;

            &:hover {
              transform: scale(1.03) translateZ(0);
              // z-index: 11 !important;
            }
          }
        }

        .rt {
          height: 320px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          align-self: flex-start;

          .title {
            font-size: 20px;
            line-height: 20px;
            text-align: left;
            margin-bottom: 0;
          }

          .sub-title {
            // height: 66px;
            font-size: 14px;
            line-height: 14px;
            width: 496px;
            text-align: justify;
            line-height: 24px;
            margin-bottom: 0;
            overflow: hidden;
            display: flex;
            align-items: center;
          }

          .item-info {
            height: 150px;
            overflow: hidden;

            p {
              text-align: left;
              margin-bottom: 32px;
              justify-content: flex-start;

              &:last-of-type {
                margin-bottom: 24px;
              }
            }

            img {
              width: 22px;
              height: 24px;
              vertical-align: middle;
              margin-right: 10px;
            }

            span {
              font-size: 14px;
              line-height: 14px;
              color: rgba(51, 64, 74, 0.8);
            }
          }

          .item-btn {
            // padding-top: 7px;
            text-align: left;

            span {
              display: inline-block;
              text-align: center;
              width: 160px;
              height: 42px;
              line-height: 42px;
              font-size: 14px;
              color: #ffffff;
              background-color: $mainColor1;
              border-radius: 4px;

              i {
                margin-left: 18px;
              }
            }
          }
        }

        &.yuan {
          .lt {
            img {
              width: 513px;
              height: 96px;
              margin-bottom: 18px;

              &:last-of-type {
                margin-bottom: 0;
              }
            }
          }
        }

        &.wei {
          .lt {
            img {
              display: block;
              position: relative;
              z-index: 3;
              height: auto;

              &:first-of-type {
                width: 354px;
                margin-bottom: 17px;
                margin-left: 130px;
              }

              &:nth-of-type(2) {
                width: 345px;
                position: absolute;
                z-index: 2;
                top: 78px;
                left: 270px;
              }

              &:last-of-type {
                width: 352px;
                margin-left: 70px;
              }
            }
          }
        }

        &.yang {
          .lt {
            position: relative;

            img {
              position: absolute;

              &:first-of-type {
                width: 329px;
                height: 319px;
                position: relative;
                margin-left: 66px;
              }

              &:nth-of-type(2) {
                height: 62px;
                left: 646px;
                z-index: 4;
                top: 46px;
                left: 320px;
              }

              &:last-of-type {
                width: 419px;
                height: 153px;
                z-index: 4;
                top: 133px;
                left: 200px;
              }
            }
          }

          .rt {
          }
        }
      }
    }
  }
}

/* pc端小屏样式 */
@media screen and (min-width: 1080px) and (max-width: 1240px) {
  .scheme-layout .title,
  .scheme-main {
    transform: scale(0.9);
  }
}

/* 移动端样式 */
@media screen and (max-width: 1080px) {
  .scheme-layout {
    width: 100vw;
    overflow: hidden;
    padding-bottom: 3rem;

    .title {
      padding-top: 4.571rem;
      font-size: 1.829rem;
      line-height: 1.829rem;
      letter-spacing: 0.011rem;
    }

    .scheme-main {
      .main-header {
        padding: 0 1.6rem;

        span {
          width: 6em;
          padding-bottom: 0.514rem;
          text-align: center;
          font-weight: 500;
          font-size: 0.8rem;
          line-height: 0.914rem;
          margin-bottom: -0.114rem;

          &.active {
            position: relative;
            border-bottom: 0.114rem solid rgba(21, 197, 206, 1);
          }
        }

        &::after {
          display: none;
        }
      }

      .main-list {
        padding-top: 1.829rem;

        .bg-img {
          display: none;
        }

        .scheme-item {
          flex-direction: column;
          padding: 0 1.6rem;

          .lt {
            height: 10.9rem;
          }

          .item-btn {
            display: none !important;
          }

          .rt {
            height: auto;
            display: block;
            width: 100%;

            .title {
              margin-bottom: 0.916rem;
              font-weight: 500;
              font-size: 0.914rem;
              line-height: 0.914rem;
              color: rgba(21, 197, 206, 1);
            }

            .sub-title {
              width: 100%;
              text-align: justify;
              margin-bottom: 1.143rem;
              font-size: 0.686rem;
              line-height: 1.143rem;
              letter-spacing: 0.02em;
            }

            .item-info {
              height: auto;

              p {
                align-items: flex-start;

                img {
                  margin-top: 0.2rem;
                  margin-right: 0.57rem;
                  width: 0.75rem;
                  height: auto;
                  line-height: 1.143rem;
                }

                margin-bottom: 1.143rem;
                text-align: justify;

                span {
                  font-size: 0.686rem;
                  line-height: 1.143rem;
                }
              }
            }
          }
        }

        .scheme-item.yuan {
          .lt {
            text-align: center;

            img {
              width: 19.429rem;
              height: auto;
            }
          }
        }

        .scheme-item.wei {
          .rt .title {
            padding-top: 3.5rem;
          }
          .lt {
            width: 19.429rem;
            margin: 0 auto;

            img {
              &:first-of-type {
                width: 12.481rem;
                height: 5.886rem;
                margin: 0;
                margin-left: 1.6rem;
                margin-bottom: 0.871rem;
              }

              &:nth-last-of-type(2) {
                width: 12.164rem;
                height: 6.591rem;
                top: 3.32rem;
                left: 6rem;
              }

              &:last-of-type {
                width: 12.411rem;
                height: 4.899rem;
                margin: 0;
              }
            }
          }
        }

        .scheme-item.yang {
          .rt .title {
            padding-top: 3.2rem;
          }
          .lt {
            width: 19.429rem;
            margin: 0 auto;

            img {
              &:first-of-type {
                width: 11.257rem;
                height: 10.914rem;
                margin: 0;
                margin-bottom: 0.871rem;
              }

              &:nth-last-of-type(2) {
                width: 7.771rem;
                height: 2.114rem;
                left: 7.486rem;
                top: 1.6rem;
              }

              &:last-of-type {
                width: 14.343rem;
                max-width: 14.343rem;
                height: 5.2rem;
                left: 3.886rem;
                top: 4.571rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>
